<template>
  <div>
    <div class="musicBody">
      <!--      <el-button @click="open(21)">打开webSocket连接21</el-button>-->
      <!--      <el-button @click="open(22)">打开webSocket连接22</el-button>-->
      <!--      <el-button @click="send(21,22,'我是22号')">发送消息给服务器21</el-button>-->
      <!--      <el-button @click="send(22,21,'我是21号')">发送消息给服务器22</el-button>-->
      <!--      <el-button @click="close">关闭webSocket连接</el-button>-->
      <!--引入聊天组件-->
      <v-chat v-if="showChatWindow===true" v-bind:chatUserInfo="chatUserInfo" @close-chat="closeChat"></v-chat>
      <el-drawer
        title="匹配用户列表"
        :visible.sync="chatDrawerVisible"
        :size="'25%'"
        direction="rtl">
        <div>
          <a href="javascript:void(0)" @click="showChat(item.id,item.username)" v-for="(item,index) in chatUserList"
             :key="index">
            <el-card shadow="hover" style="border-radius: 15px">
              <el-row>
                <el-col :span="5">
                  <el-image :src="item.headerImg" style="width: 60px;height: 60px;border-radius: 15px"></el-image>
                </el-col>
                <el-col :span="14">
                  <div>{{item.username}}</div>
                  <div style="margin-top: 20px;color: #969696" class="textDiv">
                    {{item.lastMessage}}
                  </div>
                </el-col>
                <el-col :span="5" style="color: #969696;font-size: 12px">
                  {{item.createTime}}
                </el-col>
              </el-row>
            </el-card>
          </a>
        </div>

      </el-drawer>
      <div class="chat">
        <el-link :underline="false" @click="showChatList">
          <el-badge :value="0" :max="99" class="item" :hidden="0===0">
            <el-image :src="chatLogo" style="width: 40px;height: 40px"></el-image>
          </el-badge>
        </el-link>
      </div>
    </div>
  </div>
</template>

<script>
  import header from "../layout/Header";
  import footer from "../layout/Footer";
  import menu from "../layout/Menu";
  import chat from "../layout/Chat"

  export default {
    components: {
      'v-header': header,
      'v-footer': footer,
      'v-menu': menu,
      'v-chat': chat
    },
    name: "WebSocketTest",
    data() {
      return {
        ws: '',
        path: this.$global.webSocketUrl,
        messageInfo: {
          userId: 0,
          message: '你是谁?',
          toUserId: 0,
        },
        chatLogo: require('../assets/chat.png'),
        chatDrawerVisible: false,
        chatUserList: [],
        userChatTime: '',
        //向chat中传递数据
        chatUserInfo: {
          toUserName: "",
          toUserId: 0,
          myUserId: 0,
          //标识是匹配还是相互关注聊天 0匹配 1关注聊天
          chatType: 0,
        },
        showChatWindow: false,
        myUserId: 0,
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
      closeChat(data) {
        this.showChatWindow = data;
      },
      //从列表进入聊天
      showChat(toUserId, toUserName) {
        this.chatDrawerVisible = false;
        this.chatUserInfo.toUserName = toUserName;
        this.chatUserInfo.toUserId = toUserId;
        this.chatUserInfo.myUserId = this.myUserId;
        this.showChatWindow = true;
      },
      //获取匹配用户列表
      showChatList() {
        this.chatDrawerVisible = true;
        this.$axios({
          method: 'post',
          url: '/user/getMatchingChatUser',
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          this.chatUserList = res.data.data.info;
          this.myUserId = res.data.data.myUserId;
        })
      },
      handleWsOpen(e) {
        console.log("连接成功1" + e)
      },
      handleWsError(e) {
        console.log("连接错误" + e)
      },
      handleWsClose(e) {
        console.log("关闭连接" + e)
      },
      handleWsMessage(e) {
        console.log("接受消息:" + e.data)
      },
      send(toUserId, userId, message) {
        this.messageInfo.toUserId = toUserId;
        this.messageInfo.userId = userId;
        this.messageInfo.message = message;
        this.ws.send(JSON.stringify(this.messageInfo))
      },
      close() {
        this.ws.close();
      },
      open(userId) {
        this.ws = new WebSocket(this.path + userId);
        this.ws.onopen = this.handleWsOpen;
        this.ws.onerror = this.handleWsError;
        this.ws.onmessage = this.handleWsMessage;
        this.ws.onclose = this.handleWsClose;
      }
    },

  }
</script>

<style scoped>
  .musicBody {
    width: 1000px;
    margin: 0 auto;
  }

  .chat {
    position: fixed;
    right: 10px;
    bottom: 0;
    overflow: hidden;
    padding: 30px;
  }

  .textDiv {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /deep/ .el-card__body {
    padding: 10px;
  }
</style>
